<template>
	<a-modal :visible="visible" width="600px" title="邀请签字" centered destroyOnClose @cancel="cancel" :footer="null" :maskClosable="false" :bodyStyle="{padding: 0}">
		<div class="flex-container-nomal" style="height: 150px">
			<div class="flex1 auto-y">签字链接：{{ url }}</div>
		</div>
		<div class="a-modal-dialog-footer">
			<a-space :size="12">
				<a-space :size="12">
					<a-button type="primary" @click="copyText(url)">复制链接</a-button>
				</a-space>
			</a-space>
		</div>
	</a-modal>
</template>
<script setup lang="ts">
	import {createVNode, watch, ref} from 'vue'
	import {ExclamationCircleOutlined} from '@ant-design/icons-vue'
	import {message, Modal} from 'ant-design-vue'
	import {signature} from '@/api/contract'

	const props = defineProps({
		visible: {
			type: Boolean,
			required: true
		},
		data: {
			type: Object,
			required: true
		}
	})
	const emit = defineEmits(['update:visible', 'success'])
	const cancel = () => {
		emit('update:visible', false)
	}
	watch(
		() => props.visible,
		(newVal: boolean) => {
			if (newVal) {
				getDetail()
			}
		}
	)

	const url = ref<any>('')
	const getDetail = () => {
		let params = {
			clientType: 'PC',
			contractId: props.data.contractId,
			contractType: 3
		}
		signature(params).then((res: any) => {
			if (res.data) {
				url.value = res.data.shortUrl
			}
		})
	}

	const copyText = (txt: string) => {
		const oInput = document.createElement('input')
		oInput.value = txt
		document.body.appendChild(oInput)
		oInput.select()
		document.execCommand('Copy')
		oInput.className = 'oInput'
		oInput.style.display = 'none'
		message.success('复制成功')
	}
</script>
